<template>
  <div class="quality">
      <div class="header">
        <el-form :model="queryParams" ref="queryForm"  v-show="showSearch" :inline="true"  label-width="68px">
            <!-- <el-form-item label="考试名称" prop="recordName">
               <el-input
                v-model="queryParams.recordName"
                placeholder="请输入考试名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item> -->
            <el-form-item label="工作时间" class="recordName">
                <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" 
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
            <span style="color:#00FFE3">默认查询近30天的数据</span>
            </el-form-item>
            <div style="float: right;">
                <el-switch
                    v-model="work.switch"
                    active-color="#2E9AFE"
                    inactive-color="#A4A4A4">
                </el-switch>
            </div>
        </el-form>

      </div>
      <div class="middle">
        <AnalyzeBarCharts class="middleThree" :handleOfficeLineCharts="handleQualityBarChartsShi" :chart-data="qualityBarChartsSuo"/>
        <AnalyzeBarCharts class="middleThree" :handleOfficeLineCharts="handleQualityBarChartsZu" :chart-data="qualityBarChartsShi"/>
        <AnalyzeBarCharts class="middleThree"  :chart-data="qualityBarChartsZu" :handleOfficeLineCharts="nosthing"/>
        <AnalyzeBarCharts class="middleThree" :chart-data="qualityBarChartsZuRank" />
      </div>
      <div class="footer">
        <AnalyzeBarCharts class="middleThree" :handleOfficeLineCharts="handleCountBarChartsShi" :chart-data="countBarChartsSuo"/>
        <AnalyzeBarCharts class="middleThree" :handleOfficeLineCharts="handleCountBarChartsPeople" :chart-data="countBarChartsShi"/>
        <AnalyzeBarCharts class="middleThree"  :chart-data="countBarChartsPeople" :handleOfficeLineCharts="handlePeopleTotalLineCharts"/>
        <AnalyzeLineCharts class="middleThree"  :chart-data="qualityLineCharts"/>
      </div>
      <el-dialog id="workDetail" :destroy-on-close="true" :title="work.title" :visible.sync="work.open" width="80%" :close="resetDetail" append-to-body>
        <div>
            <workDetial :queryDetailParam="queryDetailParam" v-if="work.open"/>
        </div>
       </el-dialog>
</div>      
</template>

<script>
import { queryQualityBarChartsSuo,queryQualityBarChartsShi,queryQualityBarChartsZu,queryQualityBarChartsZuRank,queryQualityLineCharts,
queryCountBarChartsSuo,queryCountBarChartsShi,queryCountBarChartsPeople} from "@/api/statistics/work/quality.js";
import { getToken } from '@/utils/auth';
import echarts from 'echarts';
import AnalyzeBarCharts from '../barcharts/AnalyzeBarCharts';
import AnalyzeLineCharts from '../linecharts/AnalyzeLineCharts';
import workDetial from "../detail/quality/index";
export default {
    name: "quality",
    components:{
        AnalyzeBarCharts,
        AnalyzeLineCharts,
        workDetial
    },
    data() {
        return {
            // 日期范围
            dateRange: [],
            // 显示搜索条件
            showSearch: true,
            qualityBarChartsSuo:{},
            qualityBarChartsShi:{},
            qualityBarChartsZu:{},
            countBarChartsSuo:{},
            countBarChartsShi:{},
            qualityBarChartsZuRank:{},
            countBarChartsPeople:{},
            qualityLineCharts:{},
            // 查询参数
            queryParams: {
                // dateRange: [],
               // recordName: null,
            
            },
            work: {
                title:"",
                open:false,
                
            },
            queryDetailParam:{}
        }
    },
    created() {
        this.getList();
    },
    mounted () {
        let that = this
        this.handleQualityBaeChartsSuo();
        this.handleQualityBarChartsShi();
        this.handleQualityBarChartsZu();
        this.handleQualityBarChartsZuRank();
        this.handleCountBarChartsSuo();
        this.handleCountBarChartsShi();
        this.handleCountBarChartsPeople();
        this.handleQualityLineCharts();
    },
    activated(){
    
    },
    methods: {
        nosthing(){},
        resetDetail(){
            this.work.open = false;
            this.queryDetailParam = {};
        },
        //详情弹窗
        openWorkDetail(params,type){
            this.queryDetailParam = {};
            // console.log("传递的参数"+ JSON.stringify(params) );
            if(this.work.switch == true&&params!=undefined){
                this.work.open = true;
                this.work.title = "";
                this.queryDetailParam = params;
                if(type == "user"){
                    this.$set(this.queryDetailParam,"userId",this.queryDetailParam.deptId);
                    this.$set(this.queryDetailParam,"deptId",null);
                }else{
                    this.$set(this.queryDetailParam,"deptId",this.queryDetailParam.deptId);
                    this.$set(this.queryDetailParam,"userId",null);
                }
                // console.log("传递的参数"+ JSON.stringify(this.queryDetailParam) );
            }
        }, 
        //查询用户弹窗
        handlePeopleTotalLineCharts(params){
            this.openWorkDetail(params,"user");
        },
        /** 查询所有图表 */
        getList() {
            this.loading = true;
            console.log("this.queryParams:"+JSON.stringify(this.queryParams));
            this.queryParams.deptId = "";
            this.handleQualityBarChartsShi(this.addDateRange(this.queryParams,this.dateRange));
            this.handleQualityBaeChartsSuo(this.addDateRange(this.queryParams,this.dateRange)); 
            this.handleQualityBarChartsZu(this.addDateRange(this.queryParams,this.dateRange));
            this.handleQualityBarChartsZuRank(this.addDateRange(this.queryParams,this.dateRange));
            this.handleCountBarChartsSuo(this.addDateRange(this.queryParams,this.dateRange));
            this.handleCountBarChartsShi(this.addDateRange(this.queryParams,this.dateRange));   
            this.handleCountBarChartsPeople(this.addDateRange(this.queryParams,this.dateRange));
            this.handleQualityLineCharts(this.addDateRange(this.queryParams,this.dateRange));
            this.loading = false;
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.queryParams.recordName = "";
            this.handleQuery();
            this.handleQualityBaeChartsSuo();
            this.handleQualityBarChartsShi();
            this.handleQualityBarChartsZu();
            this.handleQualityBarChartsZuRank();
            this.handleCountBarChartsSuo();
            this.handleCountBarChartsShi();
            this.handleCountBarChartsPeople();
            this.handleQualityLineCharts();
        },
        //  所质量单数
        handleQualityBaeChartsSuo(params){
            queryQualityBarChartsSuo(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                 newObject.bdata.push("各所质量单数（单）")//实考人数
                this.qualityBarChartsSuo = newObject;  
            });
        },
        // 科室质量单数
        handleQualityBarChartsShi(params){
            queryQualityBarChartsShi(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("各科室质量单数（单）");
                this.qualityBarChartsShi = newObject
            });
        },
        // 组质量单数
        handleQualityBarChartsZu(params){
            queryQualityBarChartsZu(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("科室组别质量单数(单)")
                this.qualityBarChartsZu = newObject
            });
           
        },
        // 排名前10质量单的组别
        handleQualityBarChartsZuRank(params){
            queryQualityBarChartsZuRank(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("质量单排名前十的组别(单)")
                this.qualityBarChartsZuRank = newObject
            });
           
        },
        
         //查询所的工作量
        handleCountBarChartsSuo(params){
            queryCountBarChartsSuo(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("各所工作量(h)")
                this.countBarChartsSuo = newObject
            });
            this.openWorkDetail(params,"dept");
            
        },
        //查询科室的工作饱和度
        handleCountBarChartsShi(params){
            queryCountBarChartsShi(params).then(response => {
               let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("各科室工作量(h)")
                this.countBarChartsShi = newObject
            });
            this.openWorkDetail(params,"dept");
            
        },
        // 查询人员工作量
        handleCountBarChartsPeople(params){
            queryCountBarChartsPeople(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                    newObject.zdata.push(item.id)
                    newObject.adata.push(item.allCount)//应考人数
                })
                newObject.bdata.push("人员工作量(h))")
                this.countBarChartsPeople = newObject
            });
            this.openWorkDetail(params,"dept");
        },
        // 查询质量问题数（近30天内）
        handleQualityLineCharts(params){
            queryQualityLineCharts(params).then(response => {
                let newObject = {
                    xdata:[],
                    ydata:[],
                    zdata:[],
                    adata:[],
                    bdata:[]
                }  
                response.forEach((item,index)=>{
                    newObject.xdata.push(item.name)
                    newObject.ydata.push(item.value)
                })
                newObject.bdata.push("近30天内质量问题单据数曲线")
                this.qualityLineCharts = newObject
            });
        },
    },

  
    
};
</script>
<style>
.quality{
    padding: 1em;
    background-color:#1f2d3d;
}
.recordName .el-form-item__label{
    color:#fff;
    font-size: 12px;
} 
.header{
    margin-left: 15px;
}
.middle{
    display: flex;
    justify-content: space-between;
    
}
.middleThree{
    background-image: url('./../../../../assets/image/data1.png'); 
    background-size: 100% 100%;
    border-radius: 2%;
    margin-left:10px;
    margin-right:10px;
}

.footer{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.GroupincomedistributionPie{
    width: 100%;
    height: 82%;
}

</style>